<template>
	<!-- 工位剩余数量 -->
	<div ref="main" style="width: 100%; height: 550px;"></div>
</template>

<script>
	import * as echarts from 'echarts';
    import {http } from '@/api/http';
	import {ContentTypeEnum,RequestHttpEnum,ModuleTypeEnum} from '@/enums/httpEnum';
	export default {
		data() {
			return {
				urlModel: {
					bigScreenRefreshTime: 60000, //此大屏默认1分钟刷新一次
					type: 1, //传给后台的大屏客户端类型    1：PC总屏  2：PC单页面或App单页面
					areaName: '', // 区域的名称
					page: 1,
					pageSize: 20
				},

				messageCountTimer: null,
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['funnel'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				option: {

					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['当前班次采集产量', '报工产量', '前班产量'],
						textStyle: {
							color: "#fff" ,//顶上图标字体的颜色
							// fontSize:30
						},
					},
					color: ["#ff642f", "#9ee6e2", "#4ff166"], //柱子、线的颜色
					calculable: true, //可计算的
					xAxis: [{
						type: 'category',
						// prettier-ignore
						data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
						axisLabel: {
							// fontSize:20  ,// x轴字体大小
							color: "#fff600" // x轴字体颜色
						},
					}],
					yAxis: [{
							type: 'value',
							axisLabel: {
								// fontSize:20  ,// x轴字体大小
								color: "#fff600" // x轴字体颜色
							},
						},
						{
							type: 'value',
							show: false //不显示y轴的数字
						}
					],
					series: [{
							name: '当前班次采集产量',
							type: 'bar',
							label: {
								show: true,
								position: 'top',
								color:"red"
							},
							data: [
								2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
							]
						},
						{
							name: '报工产量',
							type: 'bar',
							data: [
								2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
							]
						},
						{
							name: '前班产量',
							type: 'line',
							yAxisIndex: 1,
							data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
						}
					]
				}
			};
		},
		mounted() {
			
			// 创建ECharts实例
			this.chartData = echarts.init(this.$refs.main);
			// 使用配置项绘制图表
			 this.chartData.setOption(this.option);
		},

		created(){
			// this.chartData = echarts.init(this.$refs.main);
			this.getUrlArgs();
			 this.init();
		},
		destroyed() {
			clearInterval(this.messageCountTimer);
		},
		methods: {
			getUrlArgs() {
				//URL传入的大屏刷新时间
				var argumentRefreshTime = this.$route.query.refTime;
				if (argumentRefreshTime != undefined && argumentRefreshTime != null && argumentRefreshTime > 0)
					this.urlModel.bigScreenRefreshTime = argumentRefreshTime;

				this.urlModel.type = (this.$route.query.type != undefined && this.$route.query.type > 0 ? this.$route.query
					.type : 1);

				this.urlModel.areaName = (this.$route.query.areaName != undefined && this.$route.query.areaName != null ?
					this.$route.query
					.areaName : null);

				this.urlModel.page = (this.$route.query.page != undefined && this.$route.query.page > 0 ? this.$route.query
					.page : 1);

				this.urlModel.pageSize = (this.$route.query.pageSize != undefined && this.$route.query.pageSize > 0 ? this
					.$route.query
					.pageSize : 20);
				console.log(this.urlModel);
			},

			goPage() {
				let url = `/pages/reports/report5_detail`
				
				this.$mRouter.push({
					route: url
				});
			},
			async init() {
				await this.getServerData();
				//模拟从服务器获取数据时的延时
				this.messageCountTimer = await setInterval(async () => {
					await this.getServerData();
				}, this.urlModel.bigScreenRefreshTime);
			},
			async getServerData() {
				// http://localhost:3000/#/stationCurrentDayYield?refTime=60000&type=1&areaName=ZXJ&page=1&pageSize=20
				// refTime=60000&type=1&areaName=ZXJ&page=1&pageSize=20
				let url = `stationTodayYield/${this.urlModel.type}/${this.urlModel.areaName}?
				page=${this.urlModel.page}&pageSize=${this.urlModel.pageSize}&useEcharts=true`;
				var { data } = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.PROJECT}/${url}`, null);
				this.chartData.setOption(data);
				return data;
			
			},
		}
	};
</script>

<style scoped>

</style>